<template>
  <div class="scene-content">
    <h2 class="xui-text-center" v-if="isCN">展厅内景</h2>
    <h2 class="xui-text-center" v-else>Interior Scene</h2>
    <!-- <img v-for="(item,index) in listData" :src="item" alt="" :key="index"> -->
    <!-- <ul id="gallery">
      <li class="cursor-point" v-for="(item,index) in listData" :src="item" alt="" :key="index" :data-src="item">
          <img :src="item"/>
      </li>
    </ul> -->
    <p v-if="isCN" class="color-gray xui-margin-top-xs xui-margin-bottom-xs xui-text-center">点击图片查看大图</p>
    <p v-else class="color-gray xui-margin-top-xs xui-margin-bottom-xs xui-text-center">Click to preview</p>
    <div class="pic-swiper">
      <!-- swiper1 -->
      <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop" id="gallery">
        <swiper-slide v-for="(pic,index) in listData" class="cursor-point gallery-item" :data-src="pic" :style="{backgroundImage:`url(${pic})`}" :key="index">
          <img :src="pic" alt="">
          <div class="mask"></div>
        </swiper-slide>
        <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
        <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
      </swiper>
      <!-- swiper2 Thumbs -->
      <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
        <swiper-slide v-for="(pic,index) in listData" class="cursor-point" :style="{backgroundImage:`url(${pic})`}" :key="index"></swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<script>
import { getDetail, getInnerScene } from "@/api/specExhib";
import { getLang } from "@/utils/lang";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "lightgallery.js/dist/css/lightgallery.css";
import "lightgallery.js/dist/js/lightgallery.js";
import "@/plugin/lg-zoom.js";

export default {
  data() {
    return {
      listData: [],
      swiperOptionTop: {
        spaceBetween: 10,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      swiperOptionThumbs: {
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: "auto",
        touchRatio: 0.2,
        slideToClickedSlide: true
      }
    };
  },
  computed: {
    id() {
      return this.$route.params.id;
    },
    exhibDetail() {
      return this.$store.getters.specExhibDetail;
    },
    isCN() {
      return getLang() !== "en";
    }
  },
  methods: {
    initGallery() {
      lightGallery(document.getElementById("gallery"), {
        loop: true,
        fourceAutoply: false,
        autoplay: false,
        thumbnail: false,
        speed: 400,
        scale: 1,
        keypress: true,
        mode: "lg-slide",
        cssEasing: "cubic-bezier(0.25, 0, 0.25, 1)",
        download: false,
        counter: true,
        zoom: true,
        selector: ".gallery-item"
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.swiper;
      const swiperThumbs = this.$refs.swiperThumbs.swiper;
      swiperTop.controller.control = swiperThumbs;
      swiperThumbs.controller.control = swiperTop;

      if (this.exhibDetail.groupFileId) {
        getInnerScene(this.exhibDetail.groupFileId).then(res => {
          this.listData = res.data.recordsList;
          setTimeout(() => {
            this.initGallery();
          }, 50);
        });
      } else {
        getDetail(this.id).then(res => {
          let groupFileId = res.data.groupFileId;
          getInnerScene(groupFileId).then(res => {
            this.listData = res.data.recordsList;
            setTimeout(() => {
              this.initGallery();
            }, 50);
          });
        });
      }
    });
  }
};
</script>



<style lang="less" scoped>
.scene-content {
  width: 1200px;
  margin: 0 auto 30px;
}
.pic-swiper {
  height: 800px;
}
.swiper-container {
  background-color: #000;
}
.swiper-slide {
  background-size: cover;
  background-position: center;
  &.slide-1 {
    background-image: url("/static/images/surmon-1.jpg");
  }
  &.slide-2 {
    background-image: url("/static/images/surmon-6.jpg");
  }
  &.slide-3 {
    background-image: url("/static/images/surmon-8.jpg");
  }
  &.slide-4 {
    background-image: url("/static/images/surmon-9.jpg");
  }
  &.slide-5 {
    background-image: url("/static/images/surmon-10.jpg");
  }
}
.gallery-top {
  height: 80% !important;
  width: 100%;
  position: relative;
  img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }
  .mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    opacity: 0.8;
  }
}
.gallery-thumbs {
  height: 20% !important;
  box-sizing: border-box;
  padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
  opacity: 1;
}
</style>


